<script setup>
import { supplierList, delSupplier } from "@/api/supplier.js";
import { onMounted, ref, computed } from "vue";
import confirm from "@/libs/confirm";
import { submitProject } from "@/api/project";
import { toast } from "@/hook/toast";
import { delay } from "@/utils";
import AddVue from "./add/index"


const projectlist = ref([]);
const loading = ref(true)
const addRef = ref(null)
const pagination = ref({
  page: 1,
  size: 15,
  total: 0
})
const isSearch = ref(false)

async function initData() {
  loading.value = true
  const { page } = pagination.value
  const params = { page, keyword: '', status: '', user_ids: '', is_my: '' }
  if (isSearch.value) {
    const { keyword, status } = formData.value
    params.keyword = keyword
    params.status = status
  }
  const resp = await supplierList(params).catch(() => {
  });
  await delay(300)
  const { code, data, msg } = resp;
  if (code !== 1) {
    loading.value = false
    return toast({ title: msg, type: 'error' });
  }
  const { data: list, current_page, total, per_page } = data
  projectlist.value = list;
  pagination.value = {
    total,
    size: per_page,
    page: current_page
  }
  loading.value = false
}

function pageChange(val) {
  pagination.value.page = val
  initData();
}

// 添加供应商
function addHandle() {
  visible.value = true
}
const visible = ref(false)

// 编辑供应商
function editSupplier(row) {
  visible.value = true
  addRef.value?.editHandle(row)
}


// 传值回来
function addSuccess() {
  resetForm()
}
function resetForm() {
  pagination.value.page = 1;
  projectlist.value = []
  initData()
  // formRef.value.resetFields()
}

onMounted(() => {
  initData();
});

async function confirmProject(id) {
  const resp = await delSupplier({ gongyingshang_id: id })
  const { code, msg } = resp
  toast({ title: msg, type: code === 1 ? 'success' : 'error' })
  if (code !== 1) return
  pagination.value.page = 1
  await initData()
}

function confirmHandle(row) {
  const { name, id } = row
  confirm({
    title: '删除提醒',
    message: `您确定删除 ${name} 吗?`,
    confirmBtnText: '确认删除',
    cancelBtnText: '取消',
  }).then(() => confirmProject(id)).catch(() => {
  })
}

const heightValue = ref(600)
const contentRef = ref(null)
onMounted(() => {
  const target = contentRef.value
  if (!target) return
  const { height } = target.getBoundingClientRect()
  heightValue.value = height
})
const formRef = ref(null)
const formData = ref({
  keyword: '',
  status: '',

})
const statusOption = computed(() => [
  {
    label: '已结算',
    value: 1
  },
  {
    label: '未结算',
    value: 0,
  }
])

function searchHandle() {
  isSearch.value = true
  pagination.value.page = 1
  initData()
}

function resetHandle() {
  isSearch.value = false
  formRef.value.resetFields()
  pagination.value.page = 1
  initData()
}
</script>
<template>
  <div class="card_wrap business-manage flex column">
    <div>
      <el-button type="success" @click="addHandle">添加供应商</el-button>
    </div>
    <!-- <div class="w-100">
      <el-row>
        <el-col>
          <el-form ref="formRef"
                   :model="formData"
                   inline
          >
            <el-form-item label="关键字" prop="keyword">
              <el-input type="text" v-model="formData.keyword" placeholder="请输入关键字"/>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="formData.status">
                <el-option v-for="(item,index) in statusOption" :key="index" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-space>
                <el-button type="primary" @click="searchHandle">搜索</el-button>
                <el-button type="danger" @click="resetHandle">重置</el-button>
              </el-space>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div> -->
    <div class="relative w-100 flex-1" style="margin-top: 24px;">
      <div class="absolute inset" ref="contentRef">
        <el-table :data="projectlist" style="width: 100%" :height="heightValue" border fit v-loading="loading">
          <el-table-column fixed="left" prop="name" label="供应商名称" width="180" />
          <el-table-column prop="mobile" label="手机号码" />
          <el-table-column prop="wx" label="微信" />
          <el-table-column label="操作" :fixed="'right'">
            <template #default="{ row }">
              <el-space>
                <el-button type="success" @click="editSupplier(row)" plain size="small">编辑</el-button>
                <el-button type="danger" plain size="small" @click="confirmHandle(row)">删除</el-button>
              </el-space>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="page w-100">
      <el-pagination layout="prev, pager, next" :total="pagination.total" class="mt-4" :page-size="pagination.size"
        :current_page="pagination.page" @current-change="pageChange" />
    </div>
    <div>
      <add-vue ref="addRef" v-model="visible" @add-success="addSuccess"></add-vue>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.business-manage {

  .page {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }
}
</style>
